<script setup lang="ts">
import { reactive, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: [Array, Boolean],
    default: () => []
  },
  list: {
    type: Array,
    default: () => []
  },
  option: {
    type: Object,
    default: () => {}
  },
  disabled: {
    type: Boolean,
    default: () => false
  },
  indeterminate: {
    type: Boolean,
    default: () => false
  }
})

const emit = defineEmits(['update:modelValue'])

const state = reactive({
  data: props.list as any,
  inputValue: props.modelValue ? props.modelValue : []
})

const change = () => {
  emit('update:modelValue', state.inputValue)
}

watch(
  () => props.modelValue,
  (val: any) => {
    state.inputValue = val
  }
)
</script>

<template>
  <el-checkbox-group
    v-model="state.inputValue"
    :disabled="props.disabled"
    @change="change"
  >
    <el-checkbox
      :indeterminate="props.indeterminate"
      :key="j"
      v-for="(i, j) in state.data"
      :label="i[props.option?.value || 'value']"
      :disabled="i?.disabled || false"
    >
      {{ i[props.option?.label || 'label'] }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<style lang="scss" scoped></style>
